<template>
 <div style="width:100%;height: 95%;">
 <div style="height:70%;margin-top: 2%;">
    <el-table
            :data="devStatusData"
            :header-cell-style="{'text-align':'center','background-color':'#104662'}"
            :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662','color':'#fff'}"
            style="width: 95%; margin-left: 2%"
            @cell-dblclick="handleRowDblclick"

        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="8%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="date"
            label="上报时间"
            min-width="10%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="failureSystem"
            label="故障系统"
            min-width="8%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="failureContent"
            label="故障内容"
            min-width="30%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="failureLevel"
            label="故障级别"
            min-width="10%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="whethersolve"
            label="是否解决"
            min-width="10%"
            show-overflow-tooltip
         />
    <el-table-column label="详情"
        min-width="10%"
    >
      <template slot-scope="scope">
        <el-button style="margin:auto;" class="buttonInrRow" v-if="scope.$index<pageNum"
          @click="handleRead(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column label="操作"
    min-width="10%"
    >
      <template slot-scope="scope">
        <el-button
          style="margin:auto" class="buttonInrRow"  
          @click="handleIgnore(scope.$index, scope.row)">忽略</el-button>
      </template>
    </el-table-column> -->
        </el-table>
        <el-table
            :data="failureanalysisData"
            :header-cell-style="{'text-align':'center','background-color':'#104662',}"
            :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662','color':'#fff'}"
            :cell-class-name="cellClass"
            style="width: 95%;margin-left: 2%;"
            :span-method="arraySpanMethod"
            :show-header="false"
        >
          <el-table-column
            prop="title"
            label="序号"
            min-width="8%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="type"
            label="上报时间"
            min-width="18%"
            show-overflow-tooltip
          />
          
         <el-table-column
            prop="context"
            label="故障内容"
            min-width="60%"
            show-overflow-tooltip
         />
         
        </el-table>
      </div>
  <div style="margin-top: 5%;height: 5%; display: flex;flex-direction:row ; justify-content: space-around;align-items: center;">
    <div style="display: flex;flex-direction:row ; justify-content: space-around;align-items: center;">
      <span style="color:#fff;font-size: 10pt;margin-right: 5px;"> 故障部件 </span>
      <el-select v-model="param.faultposition" size="mini" :popper-append-to-body="false" clearable placeholder="请选择">
        <el-option 
          v-for="item in optionsCompone"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select>
  </div>
  <div style="width: 50%;height: 100%;margin-left: 2%;margin-right:0% ;display: flex;flex-direction:row ;align-items: center;">
    <el-date-picker 
    style="width: 100%;height: 100%;"
      size="mini"
      popper-class="datePicker"
      v-model="value1"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      >
    </el-date-picker>
    <el-button size="small" type="primary" style="width:20%;height:90%;line-height: 2%;" @click="selectData">查询</el-button>
    </div>
    <el-pagination
      style="margin-right: 2%;"
      :small="true"
      :page-size="6"
      :pager-count="7"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :hide-on-single-page="false"
      :total="total">
    </el-pagination>
    </div>
 </div>
</template>

<script>
  import { thisExpression } from '@babel/types';
import arrayEach from 'lodash/_arrayEach';
import {
    gethistoryFault
} from '../../api/diagnosisoverview'
export default {
    data() {
        return {
            param:{
                    valvehallId:1,
                    pageCurrent:1,
                    pageSize: '6',
                    faultposition:'',
                    startTime:'',
                    endTime:''
            },
            total:1,
            pageNum:'',
            value1: '',
            optionsCompone: [{
                  value: '1',
                  label: '阀TCE'
                }, {
                  value: '2',
                  label: '阀阻尼电容'
                }, {
                  value: '3',
                  label: '阀均压电阻'
                }, {
                  value: '4',
                  label: '阀电抗器'
                }, {
                  value: '5',
                  label: '阀光纤'
                },
                {
                  value: '6',
                  label: '电极状态/内冷水质'
                },
                {
                  value: '7',
                  label: '阀控板卡'
                },
                {
                  value: '8',
                  label: '晶闸管'
                }
              ],
            SelectValue: '',
            devStatusDataInit: [
              {
                    number: 1,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',

                },
                {
                    number: 2,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 3,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 4,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 5,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 6,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
            ],
            devStatusData: [
                {
                    number: 1,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',

                },
                {
                    number: 2,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 3,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 4,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 5,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
                {
                    number: 6,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: '',
                    faultposition:'',
                    whethersolve:'',
                    handingmethod:'',
                    handingtime:'',
                    handingperson:'',
                    handlingsuggestion:'',
                },
            ],
            failureanalysisData:[
              {
                title:'详情显示内容',
                type:'处理日期:',
                context:''
              },
              {
                title:'详情显示内容',
                type:'处理人员:',
                context:''
              },
              {
                title:'详情显示内容',
                type:'处理意见:',
                context:''
              },
              {
                title:'详情显示内容',
                type:'处理方法:',
                context:''
              },
              {
                title:'详情显示内容',
                type:'更换部件:',
                context:''
              }
            ],
            headerClass: {
                'text-align': 'center',
                'background': '#072D45',
                'height': '10px'
            },
            t_tableRowClassName(row, rowIndex) {
                if (rowIndex % 2 === 0) {
                    return 'row-background';
                }
            }
        }
    },
    methods: {
      selectData(){
        this.devStatusData=JSON.parse(JSON.stringify(this.devStatusDataInit))
        this.InitFailureanalysisData()
        this.historyFault()
        },
        handleCurrentChange(val) {
          this.param.pageCurrent = val
          this.historyFault()
            console.log("当前页"+val)
        },
        handleRead(index, row) {
            this.setFailureanalysisData(row)
           console.log("点击了第",index,row);
        },
        // handleIgnore(index, row) {
        //     console.log("点击了忽略",index,row);
        //     this.$confirm('确定忽略该故障吗?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$message({
        //             type: 'success',
        //             message: '忽略成功!'
        //         });
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消忽略'
        //         });
        //     });
        // },
        handleRowDblclick(row, column, event) {
          console.log("点击了",row,column)
           this.setFailureanalysisData(row)
        },
        //合并单元格
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 5 === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      //单元格文字垂直排列
      cellClass({ row, column, rowIndex, columnIndex }){
        let calssName = "cellusul";
        if(rowIndex==0 && columnIndex==0){
          calssName ="cellAdd"
        }
        return calssName
      },
      //故障列表赋值
      setFailureanalysisData(row){
        // this.failureanalysisData.forEach(element => {
        //   element.context = this.devStatusData[row-1];
        // });
        console.log("row",row)
        this.failureanalysisData[0].context = row.handingtime;
        this.failureanalysisData[1].context = row.handingperson;
        this.failureanalysisData[2].context = row.handlingsuggestion;
        this.failureanalysisData[3].context = row.handingmethod;
        this.failureanalysisData[4].context = row.faultposition[0];
      },
      //初始化故障列表
      InitFailureanalysisData(){
        this.failureanalysisData.forEach(element => {
          element.context=""
        })
        
      },


      // 设备历史故障请求
      historyFault(){
        
        if(this.value1==''||this.value1==null){
          delete this.param.startTime;
          delete this.param.endTime;
        }else{
          this.param.startTime = this.value1[0]
          this.param.endTime = this.value1[1]
        }
        
        gethistoryFault(this.param).then(response => {
          console.log('lishi',response.data.records)
          let temp = this.devStatusData;
            let recordsdata = response.data.records
            this.pageNum = response.data.records.length
            this.total= response.data.total
            recordsdata.forEach(function(item,index) {
              temp[index].date=item.time
              temp[index].failureSystem=item.faultsystem
              temp[index].failureContent=item.description
              temp[index].failureLevel=item.faultlevel
              temp[index].faultposition=item.faultposition
              temp[index].whethersolve=item.whethersolve
              temp[index].handingmethod=item.handingmethod
              temp[index].handingtime=item.handingtime
              temp[index].handingperson=item.handingperson
              temp[index].handlingsuggestion=item.handlingsuggestion
            });
            this.devStatusData = JSON.parse(JSON.stringify(temp))
      })
    },
    },
    created() {
      this.historyFault()
    },

}
</script>

<style lang="scss" scoped>

表格部分样式
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 2%;
  font-size: 14px;
}
::v-deep .el-table--border, .el-table--group {
    border: none !important;
}
::v-deep .el-table__header {
  border-spacing: 0px;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 30px;

}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  /* height: 30px; */
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
/* 设置合并单元格的样式 */
::v-deep .cellAdd {
 
  &>.cell{
  color: #fff;
  margin-left: -35%;
 }
}
::v-deep .cellAdd {
  writing-mode:tb-rl
}

.buttonInrRow {
  color: #fff;
  font-size: 12px;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 3px;
  border-color: #93dcfe;
}
/* 日期组件更改样式 */
.el-range-editor.el-input__inner{
  background-color:transparent;
  /* height: 5%; */
  width: 15%;
}
::v-deep .el-date-editor .el-range-input{
  background-color:transparent ;
}
::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
}
/*设置输入框的背景色、字体颜色、边框属性设置； */
::v-deep .el-input__inner {
  background-color:transparent;
  border-color: #0d4fcf;
   color: #fff;
}
/*更改下拉样式*/
::v-deep .el-scrollbar{
  background-color: blue;
}
/* 更改下拉框边收回时框颜色 */
::v-deep .el-select-dropdown {
  border-color: #0d4fcf;
}

/* // 设置下拉框的字体属性及背景颜色； */
.el-select-dropdown__item {
  font-size: 7px;
  line-height: -3%;
  color: #fff;
  font-weight: 200;
  background-color:#052137;

}
/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
/* // 设置鼠标悬停在下拉框列表的悬停色； */
.el-select-dropdown__item.hover {
  background-color: #0a4E7D;
}
::v-deep .el-select-dropdown__list{
  padding: 0 0;
}
::v-deep .el-textarea__inner{
  background-color:transparent;
  border-color: #0d4fcf;
  color: #fff;
}
</style>